//global vars
//stores the selected term
var STATE_term,
//cache for querying saved classes
STATE_myClasses,
//int for current pane to determine direction to scroll
STATE_currentPane = 0;

//for use w/ "addClass" buttons on class info panel
function addClass(id){
    var obj = localStorage.getItem('myClasses');
    if(obj!== null && obj.length > 0){
        obj += ',' + id;
    } else {
        obj = id;
    }
    localStorage.setItem('myClasses',obj);
    Ext.Msg.alert('','Class added.');
}

//stops event from firing
function stop(e){
    e.stopEvent();
}

Ext.setup({
	tabletStartupScreen : '',
	phoneStartupScreen  : 'imgs/iphone_Startup.png',
	icon                : 'imgs/icon.png',
	glossOnIcon         : 'false',
	statusBarStyle      : 'black',
	onReady             : function(){						
		//-----------------------------------------------------------------------------------------------------------------------------------------------------------------
		//Builds initial navigation page
		/*Ext.regModel('mainNav', {
			fields: ['navigation']
		});
		var mainStore = new Ext.data.Store({
			model: 'mainNav',
			data: [
				{navigation : 'Search by College'},
				{navigation : 'Filter Courses'},
				{navigation : 'My Schedule'},
				{navigation : 'About'}
			]
		});
		var mainList = new Ext.List({
			id               : 'mainList',
			fullscreen       : true,
			itemTpl          : '{navigation}',
			store            : mainStore,
			//behavior of selecting a navigation object
			onItemTap : function(dataview, index){
				switch(index){
					case 0:
						viewport.setActiveItem('termPanel');
						break;
					case 1:
						viewport.setActiveItem('filterPanel');
						break;
					case 2:
					    schedulePanel.loadMyClasses();	
	                    viewport.setActiveItem('schedulePanel');				    						
						break;
					case 3:
						viewport.setActiveItem('aboutPanel');
						break;
				}
			}
		});
		var mainListWrapper = new Ext.Panel({
			id          : 'mainListWrapper',
			layout      : 'fit',
			//items       : [mainList],
			dockedItems : [{
				xtype      : 'toolbar',
				title      : 'UC Course Directory'
			}]
		});*/
		var homeToolbar = new Ext.Toolbar({
			title    : 'UC Course Directory',
		});
		var homePanel = new Ext.Panel({
			id          : 'homePanel',
			fullscreen  : true,
			layout      : 'fit',
			dockedItems : [homeToolbar]
		});		
		
		//-----------------------------------------------------------------------------------------------------------------------------------------------------------------
		//Builds About panel
		var aboutToolbar = new Ext.Toolbar({
			title    : 'About'
		});
		var aboutPanel = new Ext.Panel({
			id          : 'aboutPanel',
			fullscreen  : true,
			layout      : 'fit',
			dockedItems : [aboutToolbar]
		});
		//-----------------------------------------------------------------------------------------------------------------------------------------------------------------
		//Saved classes scheduler
		Ext.regModel('MyClasses',{
		    fields: [		
		        'id',    
		        'sectionID', 
		        'sectionNumber',
		        'callNumber',,
		        'location',		      
		        'longName',
		        'credits'
		    ],
		    hasMany: {model: 'MyClassesDay', name: 'days'}
		});
		Ext.regModel('MyClassesDay', {
			fields: [
				'day',
				'startTime',
				{
					name: 'startTimeFormatted',
					convert: function(value, record){
						var date = record.get('startTime'),
							splittime = date.split(':'),
							time = splittime[0].replace(/0(\d)/, "$1") + ':' + splittime[1];
						return time;
					}
				},
				'endTime',
				{
					name: 'endTimeFormatted',
					convert: function(value, record){
						var date = record.get('endTime'),
							splittime = date.split(':'),
							time = splittime[0].replace(/0(\d)/, "$1") + ':' + splittime[1];
						return time;
					}
				}
			],
			belongsTo: 'MyClasses'
		});		
		myClassesStore = new Ext.data.Store({
			autoLoad : true,
			model    : 'MyClasses',
			//init with no data
			data     : []
		});
		var myClassesTpl = new Ext.XTemplate(
		    '<tpl for=".">',
		        '{longName}',
		        '<img src="resources/themes/images/default/pictos/delete_red1.png" ' + 
		            'onclick="Ext.getCmp(\'myClassesList\').deleteItem({[xindex-1]}, {sectionID});" ' +
		            'style="vertical-align:middle;margin-right:15px;float:right;height:31px;" />',
		        '<p>Call#: <b>{callNumber}</b></p>',
		        '<tpl for="days">',
		            '<p>{day} {startTime} - {endTime}</p>',
		        '</tpl>',
		    '</tpl>'		    	
	    );
		myClassesList = new Ext.List({
		    id           : 'myClassesList',
			store        : myClassesStore,
			itemTpl      : myClassesTpl,
            onItemDisclosure: function(record, index, item, e){
    			classPanel.getDockedComponent(0).items.get(0).handler = function() { viewport.setActiveItem('schedulePanel', {type: 'slide', direction: 'right'}); }
    			classPanel.loadClass(record.data.id);
    			viewport.setActiveItem('classPanel');
            },
            deleteItem: function(index, sectionID){
				Ext.Msg.confirm('Delete Class','Are you sure?',function(btn) {
						if(btn == 'yes') {
							var store = myClassesList.getStore();
                			var record = store.getAt(index);
                			store.remove(record);
                
			                //adjust the localStorage and remove the sectionID that is deleted                
                			var tempArr = localStorage.getItem('myClasses').split(',');
                			for(i = 0; i < tempArr.length; ++i){
                    			if (tempArr[i] == sectionID) tempArr.splice(i,1);
                			}
                			localStorage.setItem('myClasses',tempArr.join(','));
						}
					})
            }
		});
		//Builds My Schedule panel
		scheduleToolbar = new Ext.Toolbar({
			title    : 'My Schedule'			
		});
		var schedulePanel = new Ext.Panel({
			id          : 'schedulePanel',
			fullscreen  : true,
			layout      : 'fit',
			items       : [myClassesList],
			dockedItems : [scheduleToolbar],
			loadMyClasses: function(){
			    //only load if classes have been saved and not cached
			    if(localStorage.getItem("myClasses") !== null && localStorage.getItem("myClasses").length > 0 && localStorage.getItem("myClasses") != STATE_myClasses){
			        var proxy = new Ext.data.AjaxProxy({
	                    url         : 'php/getMyClasses.php',
	                    reader      : {
		                    type       : 'json',
		                    root       : ''
	                    },
	                    extraParams : {
		                    sections: localStorage.getItem("myClasses")
	                    }
                    });

                    myClassesStore.setProxy(proxy);
                    myClassesStore.load();				
                    myClassesList.update();
                    
                    STATE_myClasses = localStorage.getItem("myClasses");
                }
			}
		});
		//-----------------------------------------------------------------------------------------------------------------------------------------------------------------
		//Builds Term panel
        Ext.regModel('Terms', {
            fields: [
                {name: 'term', type : 'string'}
            ]
        });
        var termStore = new Ext.data.Store({
            autoLoad: true,
            model: 'Terms',
            data: [
                {term: 'Autumn'},
                {term: 'Winter'},
                {term: 'Spring'},
                {term: 'Summer'}
            ]
        });
        var termList = new Ext.List({
            id: 'termList',
            itemTpl: '{term}',
            store: termStore,
            //check if term within current
            //set global term variable
            //go to college panel
            onItemTap: function(view, index, item, e){
                var date = new Date();
                console.log(date);
                switch(index){
                    case 1:
                        STATE_term = 'W';
                        break;
                    case 2:
                        STATE_term = 'S';                    
                        break;
                    case 3:
                        STATE_term = 'U';                    
                        break;
                    default:
                        STATE_term = 'A';                    
                        break;
                }
                viewport.setActiveItem('collegePanel');
            }
        });
        var termToolbar = new Ext.Toolbar({
			title    : 'Select a Term',
			items    : [{
				text    : 'Back',
				ui      : 'back',
				handler : function(){
					viewport.setActiveItem('mainListWrapper', {type: 'slide', direction: 'right'});
				}
			}]
		});
		var termPanel = new Ext.Panel({
			id          : 'termPanel',
			fullscreen  : true,
			layout      : 'fit',
			items       : [termList],
			dockedItems : [termToolbar ]
		});
		//-----------------------------------------------------------------------------------------------------------------------------------------------------------------
		//Builds Search By College panel
		//model for the mySQL call in getColleges.php and getDisciplines.php
		//returns a JSON object with id and name
		Ext.regModel('CollegeDisciplineClass', {
			fields: [
				{name : 'id', type   : 'string'},
				{name : 'name', type : 'id'}
			]
		});
		Ext.regModel('Discipline', {
			fields: [
				{name : 'id', type       : 'string'},
				{name : 'name', type     : 'id'},
				{name : 'collegeID',type : 'id'}
			]
		});
		var collegeStore = new Ext.data.Store({
			autoLoad : true,
			model    : 'CollegeDisciplineClass',
			proxy    : {
				type    : 'ajax',
				url     : 'php/getColleges.php',
				reader  : {
					type   : 'json',
					root   : 'colleges'
				}
			}
		});
		var collegeList = new Ext.List({
			id               : 'collegeList',
			itemTpl          : '{name}',
			store            : collegeStore,
			//behavior of selecting a college
			onItemTap : function(view, index, item, e){
				//change the viewport FIRST to properly display loading mask
				disciplineList.store.clearFilter();
				var id = Ext.getCmp('collegeList').getStore().getAt(index).data.id;
				if ( id > 0) {
					disciplineList.store.filter('collegeID', id);
				}
				viewport.setActiveItem('disciplinePanel');								
			}
		});
		var collegeToolbar = new Ext.Toolbar({
			title    : 'Select a College',
			items    : [{
				text    : 'Back',
				ui      : 'back',
				handler : function(){
					viewport.setActiveItem('termPanel', {type: 'slide', direction: 'right'});
				}
			}]
		});
		var collegePanel = new Ext.Panel({
			id          : 'collegePanel',
			fullscreen  : true,
			layout      : 'fit',
			items       : [collegeList],
			dockedItems : [collegeToolbar ]
		});
		//-----------------------------------------------------------------------------------------------------------------------------------------------------------------
		//Builds Disciplines panel
		var disciplineToolbar = new Ext.Toolbar({
			title    : 'Select Discipline',
			items    : [{
				text    : 'Back',
				ui      : 'back',
				handler : function(){
					viewport.setActiveItem('collegePanel', {type: 'slide', direction: 'right'});
					//disciplineStore.data = [];
					//disciplineList.update();
				}
			}]
		});
		var disciplineStore = new Ext.data.Store({
			autoLoad : true,
			model    : 'Discipline',
			proxy    : {
				type    : 'ajax',
				url     : 'php/getDisciplines.php',
				reader  : {
					type   : 'json',
					root   : 'disciplines'
				}			
			}
		});
		var disciplineList = new Ext.List({
			id               : 'disciplineList',
			itemTpl          : '{name}',
			indexBar         : true,
			store            : disciplineStore,
			onItemTap : function(view, index, item, e){		
				//update back button of classespanel
				classesPanel.getDockedComponent(0).items.get(0).handler = function() { viewport.setActiveItem('disciplinePanel', {type: 'slide', direction: 'right'}); }			
									
				viewport.setActiveItem('classesPanel');
				
				//create a new proxy to query disciplines based on college selection
				var proxy = new Ext.data.AjaxProxy({
					url         : 'php/getClassesList.php',
					model       : 'CollegeDisciplineClass',
					reader      : {
						type       : 'json',
						root       : 'classes'
					},
					extraParams : {
						//this defines the "WHERE" in our query
						id         : Ext.getCmp('disciplineList').getStore().getAt(index).data.id,
						term       : STATE_term
					}
				});
				//load the proxy into the store, update the store, update the list, and load the next view
				classesStore.setProxy(proxy);
				classesStore.load();
				classesList.update();				
			}
		});
		var disciplinePanel = new Ext.Panel({
			id          : 'disciplinePanel',
			fullscreen  : true,
			layout      : 'fit',
			items       : [disciplineList],
			dockedItems : [disciplineToolbar]
		});
		//-----------------------------------------------------------------------------------------------------------------------------------------------------------------
		//Builds Classes panel
		classesToolbar = new Ext.Toolbar({
			title: 'Select Class',
			items: [{
				text: 'Back',
				ui: 'back',
				handler: function(){
					viewport.setActiveItem('disciplinePanel', {type: 'slide', direction: 'right'});
				}
				}]
		});
		var classesStore = new Ext.data.Store({
			autoLoad : true,
			model    : 'CollegeDisciplineClass',
			//init with no data because a college has not been selected
			data     : []
		});
		var classesList = new Ext.List({
			id               : 'classesList',
			itemTpl          : '{name}',
			baseCls          : 'capitalize',
			indexBar         : true,
			store            : classesStore,
			onItemTap : function(view, index, item, e){
    			classPanel.getDockedComponent(0).items.get(0).handler = function() { viewport.setActiveItem('classesPanel', {type: 'slide', direction: 'right'}); }
				classPanel.loadClass(Ext.getCmp('classesList').getStore().getAt(index).data.id);
				viewport.setActiveItem('classPanel');
			}
		});
		classesPanel = new Ext.Panel({
			id          : 'classesPanel',
			fullscreen  : true,
			layout      : 'fit',
			items       : [classesList],
			dockedItems : [classesToolbar]
		});
		//-----------------------------------------------------------------------------------------------------------------------------------------------------------------
		//Builds Classes panel
		var classToolbar = new Ext.Toolbar({
			title    : 'Class Info',
			items    : [{
				text    : 'Back',
				ui      : 'back',
				handler : function(){
					viewport.setActiveItem('classesPanel', {type: 'slide', direction: 'right'});
				}
			}]
		});
		
		Ext.regModel("ClassInfo", {
			fields: [
				'discipline',
				'college',
				'courseNumber',
				'name',
				'descrip',
				'bok',
				'credits',
				'honors'
			],
			hasMany: {model: 'Section', name: 'sections'}
		});
		Ext.regModel("Section", {
			fields: [
			    'sectionID',
				'section',
				'callNumber',
				'notes',
				'instructor',
				'location'
			],
			hasMany: {model: 'Day', name: 'days'},
			belongsTo: 'ClassInfo'
		});
		Ext.regModel('Day', {
			fields: [
				'day',
				'startTime',
				{
					name: 'startTimeFormatted',
					convert: function(value, record){
						var date = record.get('startTime'),
							splittime = date.split(':'),
							time = splittime[0].replace(/0(\d)/, "$1") + ':' + splittime[1];
						return time;
					}
				},
				'endTime',
				{
					name: 'endTimeFormatted',
					convert: function(value, record){
						var date = record.get('endTime'),
							splittime = date.split(':'),
							time = splittime[0].replace(/0(\d)/, "$1") + ':' + splittime[1];
						return time;
					}
				}
			],
			belongsTo: 'Section'
		});		
		var classStore = new Ext.data.Store({
			autoLoad : true,
			model    : 'ClassInfo',
			data     : []
		});
		var classTpl = new Ext.XTemplate(
			'<tpl for=".">',
				'<div class="classInfo">',					
					'<h2>{name}</h2>',
					'<h3>{discipline}</h3>',
					'<h4>{college}</h4>',
					'<p class="descriptionHeader">Description</p>',
					'<p class="description">{descrip}</p>',
					'<p class="courseNumber"><b>Course Number:</b> {courseNumber}</p>',
					'<table class="credits"><tr><td class="header">Credits</td><td class="header">BoK</td><td class="header">Honors</td></tr>',
					'<tr class="creditsRow"><td>{credits}</td><td>{bok}</td><td>{honors}</td></tr></table>',
                    '<table class="section"><tr><td class="header" width="25%">Section</td><td class="header" width="50%" colspan="2">Schedule</td><td class="header" width="25%" rowspan="2">Add Course</td></tr><tr><td class="header" width="25%">Instructor</td><td class="header" width="25%">Location</td><td class="header" width="25%">Call Number</td><td class="header" width="25%"></td></tr></table>',
					'<tpl for="sections">',
						'<table class="section"><tr><td width="25%">{section}</td><td width="50%" colspan="2">',
							'<tpl for="days">',
								'{day} {startTimeFormatted} - {endTimeFormatted}<br>',
							'</tpl>',
                        //USE ONTOUCHEND INSTEAD OF ONCLICK, onclick for PC testing only
						'</td><td width="25%" rowspan="2"><input type="button" value="+" class="addClass" onclick="addClass({sectionID})" /></td></tr>',
						'<tr><td width="25%">{instructor}</td><td width="25%">{location}</td><td width="25%">{callNumber}</td></tr>',
						'<tpl if="this.Length(notes) &gt; 0">',
							'<tr><td class="header" colspan="3">Notes</td></tr>',
							'<tr><td colspan="3">{notes}</td></tr>',						
						'</tpl>',
						'</table>',
					'</tpl>',
				'</div>',
			'</tpl>',
			{
				compiled: true,
				Length: function(item){
					return item.length;
				}
			}
		);
		var classView = new Ext.DataView({
			store        : classStore,
			tpl          : classTpl,
			autoHeight   : true,
			itemSelector : '.x-list-item',
			emptyText    : 'Error retrieving data'
		});
		var classPanel = new Ext.Panel({
			id          : 'classPanel',
			fullscreen  : true,
			layout      : 'fit',
			dockedItems : [classToolbar],
			items       : [classView],
			loadClass   : function(classID){
				var proxy = new Ext.data.AjaxProxy({
					url         : 'php/getClassInfo.php',
					reader      : {
						type       : 'json',
						root       : ''
					},
					extraParams : {
						//this defines the "WHERE" in our query
						id         : classID
					}
				});
				
				classStore.setProxy(proxy);
				classStore.load();				
				classView.update();
			}
		});
		//-----------------------------------------------------------------------------------------------------------------------------------------------------------------
		//Builds Filter Course panel
		var filterToolbar = new Ext.Toolbar({
			title    : 'Filter Courses'		
		});
		 Ext.regModel('BoKs', {
            fields: [
                {name: 'text',     type: 'string'},
                {name: 'abbr',    type: 'string'}
            ]
         });
		 
		 var bokstore = new Ext.data.JsonStore({
           data : [
		   		{ text : 'All',  abbr : 'ALL'},
                { text : 'Diversity & Culture',  abbr : 'DC'},
                { text : 'English Composition', abbr : 'EC'},
                { text : 'Fine Arts', abbr : 'FA'},
				{ text : 'Humanities', abbr : 'HU'},
				{ text : 'Literature', abbr : 'LT'},
				{ text : 'Natural Sciences', abbr : 'NS'},
				{ text : 'Quantitative Reasoning', abbr : 'QR'},
				{ text : 'Social & Ethical Issues', abbr : 'SE'},
				{ text : 'Social Sciences', abbr : 'SS'}
           ],
           model : 'BoKs',
           autoLoad : true,
           autoDestroy : true
        });
		filterPanel = new Ext.Panel({
            	id            : 'filterPanel',
            	fullscreen    : true,
                xtype      : 'form',
                scroll     : 'vertical',
				getDays: function(){
					var temp = "";
					if(filterPanel.items.get(2).items.get(0).isChecked() == true){
						temp += "M";
					}
					if(filterPanel.items.get(2).items.get(1).isChecked() == true){
						temp += "T";
					}
					if(filterPanel.items.get(2).items.get(2).isChecked() == true){
						temp += "W";
					}
					if(filterPanel.items.get(2).items.get(3).isChecked() == true){
						temp += "H";
					}
					if(filterPanel.items.get(2).items.get(4).isChecked() == true){
						temp += "F";
					}
					if(filterPanel.items.get(2).items.get(5).isChecked() == true){
						temp += "S";
					}
					if(filterPanel.items.get(2).items.get(6).isChecked() == true){
						temp += "U";
					}
					return temp;
				},
                items      : [{
            		xtype        : 'selectfield',
            		name         : 'college',
            		label        : 'College',
            		valueField   : 'id',
            		displayField : 'name',
            		store        : collegeStore,
            		allowBlank   : false,
            		listeners    : {
            			change      : function(record,college) {
            				disciplineStore.clearFilter();
							if (college != '0') {
								disciplineStore.filter('collegeID', college);
							}
            				//disciplineStore.add({"id": 0, "name":"-Select All-", "collegeID": record})
            			}
					}
            	},
            	{
            		xtype        : 'selectfield',
            		name         : 'discipline',
            		label        : 'Discipline',
            		valueField   : 'id',
            		displayField : 'name',
            		store        : disciplineStore,
					allowBlank            : false
            	},
            	{
            		xtype             : 'fieldset',
            		title             : 'Meeting Day',
            		instructions      : 'Please select desired meeting days.',
            		defaults          : {
            			required         : true,
                    	labelAlign : 'left',
                    	labelWidth : '40%',
                    	xtype      : 'checkboxfield',
                    	value      : true
            		},
            		items          : [{
            		        	name  : 'M',
            		        	label : 'Monday',
            		        },
            		        {
            		        	name  : 'T',
            		        	label : 'Tuesday'
            		        },
            		        {
            		        	name  : 'W',
            		        	label : 'Wednesday'
            		        },
            		        {
            		        	name  : 'H',
            		        	label : 'Thursday'
            		        },
            		        {
            		        	name  : 'F',
            		        	label : 'Friday'
            		        },
            		        {
            		        	name  : 'S',
            		        	label : 'Saturday'
            		        },
            		        {
            		        	name  : 'U',
            		        	label : 'Sunday'
            		        }
            		        ]
            	},
				{
					xtype: 'selectfield',
					name : 'bok',
					label: 'Breadth of Knowledge (BoK)',
                    valueField : 'abbr',
                    displayField : 'text',
                    store : bokstore
                }, 
				{
					xtype: 'textfield',
                    name : 'keyword',
                    label: 'Keyword',
					placeHolder: '(optional)',
                    useClearIcon: true,
                    autoCapitalize : false
                },          	
            	{
            		xtype      : 'button',
            		flex       : 1,
                	text    : 'Reset form',
                	handler : function(){
            			console.log(filterPanel.items)      
            			//gotta figure this out
                	}
            	},
				{xtype: 'spacer'},
            	{
            		xtype      : 'button',
            		flex       : 1,
            		text       : 'Submit',
            		handler: function(){
							classesPanel.getDockedComponent(0).items.get(0).handler = function() { viewport.setActiveItem('filterPanel', {type: 'slide', direction: 'right'}); }
							var proxy = new Ext.data.AjaxProxy({
            				url: 'php/getQueryClasses.php',
            				model: 'CollegeDisciplineClass',
            				reader: {
    							type: 'json',
    							root: 'classes'
    						},
    						extraParams: {
    							//this defines the "WHERE" in our query
            					collegeID: filterPanel.items.get(0).getValue(),
								disciplineID: filterPanel.items.get(1).getValue(),
								days: filterPanel.getDays(),
								bok: filterPanel.items.get(3).getValue()
    						}
            			});
            			//load the proxy into the store, update the store, update the list, and load the next view
            			classesStore.setProxy(proxy);
            			classesStore.load();
            			classesList.update();
            			viewport.setActiveItem('classesPanel', {type: 'slide', direction: 'right'});
                	}
            	}
            ]
            ,dockedItems : [filterToolbar],
			listeners             : {
				afterrender          : function(){
					this.items.get(0).setValue('All');
				}
			}
		});		
		//-----------------------------------------------------------------------------------------------------------------------------------------------------------------
		//Viewport of entire app
		var bar = new Ext.TabBar({
    		dock : 'bottom',
    		ui   : 'light',
			layout: {
				pack: 'center'
			},
			items: [
				{
					text: 'Home',
					iconCls: 'home',
					cls: 'homeButton',
					handler: function(){
						viewport.setActiveItem('homePanel', {type: 'slide', direction: (STATE_currentPane - 0 > 0) ? 'right' : 'left'});
						STATE_currentPane = 0;
					}
				},
				{
					text: 'All Classes',
        			iconCls: 'bookmarks',
        			cls: 'classesButton',
					handler: function(){
						viewport.setActiveItem('termPanel', {type: 'slide', direction: (STATE_currentPane - 1 > 0) ? 'right' : 'left'});
						STATE_currentPane = 1;
					}
    			},
				{
					text: 'Search',
        			iconCls: 'search',
        			cls: 'searchButton',
					handler: function(){
						viewport.setActiveItem('filterPanel', {type: 'slide', direction: (STATE_currentPane - 2 > 0) ? 'right' : 'left'});
					    STATE_currentPane = 2;
					}
    			},
				{
					text: 'My Classes',
        			iconCls: 'favorites',
        			cls: 'myClassesButton',
					handler: function(){
						schedulePanel.loadMyClasses();
						viewport.setActiveItem('schedulePanel', {type: 'slide', direction: (STATE_currentPane - 3 > 0) ? 'right' : 'left'});
					    STATE_currentPane = 3;
					}
    			},
				{
					text: 'About',
        			iconCls: 'info',
        			cls: 'aboutButton',
					handler: function(){
						viewport.setActiveItem('aboutPanel', {type: 'slide', direction: (STATE_currentPane - 4 > 0) ? 'right' : 'left'});
						STATE_currentPane = 4;
					}
    			}
			]
		});
		viewport = new Ext.Panel({
			id: 'viewport',
			fullscreen          : true,
			layout              : 'card',
			cardSwitchAnimation : 'slide',
			dockedItems: [bar],
			items               : [homePanel, aboutPanel, schedulePanel, termPanel, collegePanel, filterPanel, disciplinePanel, classesPanel, classPanel]
		});
				
	}
});
